<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<pre>
			通常父子组件传值通过props和$emit传递，
			如果多层组件嵌套，C嵌套于B，B嵌套于A，A直接传递数据到C，可以使用$attrs  $listeners传递
			
		</pre>
		<div id="app">
			<App />
		</div>
		<script src="../node_modules/vue/dist/vue.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			//子组件通过props接受父组件自定义属性的数据
			let Child = {
				template: '<div v-text="message"></div>',
				props: ['message'],
				data(){
					return {
						
					}
				},
				computed: {
						
				},
				methods: {
					
				},
			}
			//父组件通过自定义属性传递数据
			let App = {
				template: '<div>App组件内容<Child :message="parentData" /></div>',
				data(){
					return {
						parentData: 'parentDatas'
					}
				},
				components: {
					Child,
				},
			}
			let vm = new Vue({
				el: '#app',
				data(){
					return {
						
					}
				},
				components: {
					App,
				},
			})
		</script>
	</body>
</html>
